<template>
  <div class="container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="目录名称">
        <el-input v-model="formInline.user" class="directory-name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="formInline.region"
          placeholder="请选择"
          class="directory-name"
          ref="enmty"
        >
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="el-btn" @click="clear">清除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="el-btn" @click="btn(tableData)"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          class="el-succeedbtn"
          @click="dialogVisible = true"
          ><i class="el-icon-edit"></i> 新增目录</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表单 -->
    <el-alert type="info" show-icon :closable="false">
      当前一共 {{ getdatas }}条数据</el-alert
    >
    <el-table :data="tableData" style="width: 100%" class="table">
      <el-table-column label="序号" width="150" type="index" :index="hIndex">
      </el-table-column>
      <el-table-column prop="tagName" label="所属学科" width="200">
      </el-table-column>
      <el-table-column prop="subjectID" label="标签名称" width="200">
      </el-table-column>
      <el-table-column prop="username" label="创建者" width="200">
      </el-table-column>
      <el-table-column label="创建日期" width="260">
        <template slot-scope="scope">
          <p>{{ tableData[scope.$index].addDate | relativeTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="90" class="state">
        <template slot-scope="scope">
          <p v-if="tableData[scope.$index].state === 1">已启用</p>
          <p v-if="tableData[scope.$index].state === 0">已禁用</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
            v-model="qiyong"
            >{{
              tableData[scope.$index].state === 0 ? "启用" : "禁用"
            }}</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="getdataxiu(scope)"
            :disabled="tableData[scope.$index].state === 1"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="[tanchu(scope)]"
            :disabled="tableData[scope.$index].state === 1"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- /表单 -->
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Pages"
      >
      </el-pagination>
    </div>
    <!-- /分页 -->
    <!-- 新增目录弹出层 -->
    <el-dialog title="新增目录" :visible.sync="dialogVisible" width="28%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属学科">
          <el-select
            v-model="formInline.subjectID"
            placeholder="请选择"
            class="directory-name selecter"
            ref="enmty"
          >
            <el-option
              v-for="(item, index) in tableData"
              :key="index"
              :value="item.subjectID"
            ></el-option>
          </el-select> </el-form-item
        ><br />
        <span style="color: red; font-size: 1px">*</span>
        <el-form-item label="目录名称">
          <el-input
            v-model="formInline.gettags"
            class="directory-name"
          ></el-input> </el-form-item
        ><br />
        <el-form-item>
          <el-button class="el-btns el-btn" @click="dialogVisible = false"
            >取消</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button class="el-btns el-btn el-btned" @click="addtags"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- /新增目录弹出层 -->
    <!-- 删除 -->
    <el-dialog
      title="您确定要删除吗?"
      :visible.sync="centerDialogVisible"
      width="30%"
    >
      <el-result icon="warning" class="ereer"> </el-result>
      <p>111111111111111111111111111111111111111</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" class="el-btn"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="[enmtyed(Indexed), (centerDialogVisible = false)]"
          class="el-btn el-btner"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- /删除 -->
    <!-- 修改 -->
    <el-dialog title="修改目录" :visible.sync="xiugai" width="30%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属学科">
          <el-select
            v-model="formInline.updates"
            :placeholder="lis.subjectName"
            class="directory-name selecter"
            ref="enmty"
          >
            <el-option
              v-for="(item, index) in tableData"
              :key="index"
              :value="item.subjectName"
            ></el-option>
          </el-select> </el-form-item
        ><br />
        <span style="color: red; font-size: 1px">*</span>
        <el-form-item label="目录名称">
          <el-input
            v-model="formInline.updatename"
            class="directory-name"
          ></el-input> </el-form-item
        ><br />
        <el-form-item>
          <el-button class="el-btns el-btn" @click="xiugai = false"
            >取消</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button class="el-btns el-btn el-btned" @click="update"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- /修改 -->
  </div>
</template>

<script>
import { list, add, remove, update, changeState } from '../../api/hmmm/tags'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: '',
        subjectID: '',
        gettags: '',
        updates: '',
        updatename: ''
      },
      tableData: [],
      page: 1,
      pagesize: 10,
      Pages: 0,
      dialogVisible: false,
      centerDialogVisible: false,
      Indexed: '',
      xiugai: false,
      subid: 0,
      lis: '',
      list: '',
      qiyong: '',
      state: 0,
      Lndex: '',
      getdatas: '',
      rows: '',
      id: ''
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    // 序号索引
    hIndex (index) {
      return index + 1
    },
    // 标签列表
    async getDataList () {
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize
        })
        console.log(data)
        this.Pages = data.counts
        this.tableData = data.items
        this.getdatas = data.counts
      } catch (error) {}
    },
    // 清空表单
    clear () {
      this.formInline.region = ''
      this.formInline.user = ''
    },
    // 禁用
    async handleClick (val) {
      const id = val.id
      console.log(id)
      if (val.state === 1) {
        try {
          const state = 0
          const { data } = await changeState({
            id: val.id,
            state
          })
          console.log(data)
          this.tableData.state = state
          this.getDataList()
          console.log()
        } catch (error) {}
        this.$message({
          showClose: true,
          message: '禁用成功',
          type: 'success'
        })
      } else if (val.state === 0) {
        try {
          console.log(111)
          const state = 1
          const { data } = await changeState({
            id: val.id,
            state
          })
          console.log(data)
          this.tableData.state = state
          this.getDataList()
        } catch (error) {}
        this.$message({
          showClose: true,
          message: '启用成功',
          type: 'success'
        })
      }
    },
    // 分页
    async handleSizeChange (val) {
      this.pagesize = val
      console.log(val)
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize
        })
        console.log(data.items)
        this.tableData = data.items
      } catch (error) {}
    },
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      console.log(22)
      this.page = val
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize
        })
        console.log(data.items)
        this.tableData = data.items
      } catch (error) {}
    },
    // 添加文章
    async addtags () {
      console.log(this.formInline.subjectID)
      console.log(this.formInline.gettags)
      if (!this.formInline.subjectID || !this.formInline.gettags) {
        return this.$message({
          showClose: true,
          message: '不能为空',
          type: 'warning'
        })
      }
      try {
        const { data } = await add({
          subjectID: this.formInline.subjectID,
          tagName: this.formInline.gettags
        })
        console.log(data)
        try {
          const { data } = await list({
            page: this.page,
            pagesize: this.pagesize
          })
          console.log(data.items)
          this.tableData = data.items
        } catch (error) {
          this.$message('添加失败')
        }
        this.dialogVisible = false
        this.formInline.subjectID = ''
        this.formInline.ugettagsser = ''
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
        this.getDataList()
      } catch (error) {}
    },
    // 删除标签
    tanchu (scope) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const i = this.tableData.findIndex(
          (value) => value.id === scope.row.id
        )
        const id = scope.row
        console.log(i)
        this.tableData.splice(i, 1)
        console.log(id)
        try {
          const { data } = await remove(id)
          console.log(data)
        } catch (error) {}
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    // 修改
    getdataxiu (scope) {
      const i = this.tableData.filter((value) => value.id === scope.row.id)
      this.lis = i[0]
      this.formInline.updatename = this.lis.tagName
      this.xiugai = true
      this.Lndex = scope.row.id
      this.rows = scope.row.subjectID
      this.formInline.updates = this.lis.subjectName
    },
    async update () {
      if (!this.formInline.updatename) {
        return this.$message({
          showClose: true,
          message: '不能为空',
          type: 'warning'
        })
      }
      try {
        await update({
          subjectID: this.rows,
          tagName: this.formInline.updatename,
          id: this.Lndex
        })
        this.getDataList()
        this.xiugai = false
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        })
      } catch (error) {
        this.$message('修改失败')
      }
    },
    // search
    async btn () {
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize,
          tagName: this.formInline.user,
          state: this.formInline.region
        })
        console.log(data)
        this.Pages = data.counts
        this.tableData = data.items
      } catch (error) {}
    }
  }
}
</script>

<style scoped lang="less">
//清除
.el-btn {
  width: 60px;
  height: 40px;
}
//搜索
.el-button--medium {
  padding: 0%;
  font-size: 10px;
}
//新增目录
.el-succeedbtn {
  position: absolute;
  right: -540px;
  width: 121px;
  height: 40px;
}
//表单版心
.container {
  margin: 0 auto;
  padding: 10px;
  width: 1300px;
  height: 700px;
  background-color: #fff;
}
//目录名称/状态
.directory-name {
  height: 40px;
  width: 235px;
}
//table表格
.table {
  height: 540px;
}
/deep/ .el-table--medium .el-table__cell {
  padding: 0;
}
.cell-space /deep/ .el-table .el-table__body-wrapper .el-table__body {
  border-collapse: separate;
  border-spacing: 1000px;
}

//弹出层
.el-dropdown-link {
  position: absolute;
  margin-left: 60% !important;
  display: block;
  cursor: pointer;
  color: #409eff;
  width: 300px !important;
  height: 30px;
  background-color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.selecter {
  width: 235px;
}
/deep/.el-dialog__body {
  width: 900px;
}
.fromright {
  float: right;
}
.el-btns {
  position: absolute;
  top: 0%;
  right: -223px;
}
.el-btned {
  right: -295px;
  background-color: rgb(60, 150, 247);
  color: #fff;
}
.el-pagination {
  white-space: nowrap;
  padding: 4px 5px;
  color: #303133;
  margin-left: 60%;
  font-weight: 700;
}
//删除
.cleareee {
  background-color: #fff !important;
}
.ereer {
  width: 100px;
}
</style>
